{% extends 'game_core/base.html' %}
{% load static %}
{% load game_filters %}

{% block content %}
<div class="upgrade-container">
    <div class="character-stats">
        <h2>角色属性</h2>
        <div class="stats-info">
            <p>当前金币: {{ character.gold }}</p>
            <p>生命值: {{ character.base_hp }} (升级需要 {{ character.base_hp|multiply:10 }} 金币)</p>
            <p>攻击力: {{ character.base_attack }} (升级需要 {{ character.base_attack|multiply:10 }} 金币)</p>
            <p>防御力: {{ character.base_defense }} (升级需要 {{ character.base_defense|multiply:10 }} 金币)</p>
        </div>
        <div class="upgrade-buttons">
            <form method="post" action="{% url 'game_core:upgrade_stat' %}" class="upgrade-form">
                {% csrf_token %}
                <input type="hidden" name="stat_type" value="hp">
                <button type="submit" class="upgrade-btn" {% if character.gold < character.base_hp|multiply:10 %}disabled{% endif %}>
                    升级生命值 (+10)
                </button>
            </form>
            
            <form method="post" action="{% url 'game_core:upgrade_stat' %}" class="upgrade-form">
                {% csrf_token %}
                <input type="hidden" name="stat_type" value="attack">
                <button type="submit" class="upgrade-btn" {% if character.gold < character.base_attack|multiply:10 %}disabled{% endif %}>
                    升级攻击力 (+2)
                </button>
            </form>
            
            <form method="post" action="{% url 'game_core:upgrade_stat' %}" class="upgrade-form">
                {% csrf_token %}
                <input type="hidden" name="stat_type" value="defense">
                <button type="submit" class="upgrade-btn" {% if character.gold < character.base_defense|multiply:10 %}disabled{% endif %}>
                    升级防御力 (+1)
                </button>
            </form>
        </div>
    </div>

    <div class="skills-section">
        <div class="skills-header">
            <h2>技能升级</h2>
            <a href="{% url 'game_core:skill_shop' %}" class="shop-btn">技能商店</a>
        </div>
        {% for char_skill in character.characterskill_set.all %}
        <div class="skill-item">
            <div class="skill-info">
                <h3>{{ char_skill.skill.name }}</h3>
                <p>{{ char_skill.skill.description }}</p>
                <p>当前等级: {{ char_skill.current_level }}/{{ char_skill.skill.max_level }}</p>
                <p>升级费用: {{ char_skill.current_level|multiply:50 }} 金币</p>
            </div>
            {% if char_skill.current_level < char_skill.skill.max_level %}
            <form method="post" action="{% url 'game_core:upgrade_skill' %}" class="upgrade-form">
                {% csrf_token %}
                <input type="hidden" name="skill_id" value="{{ char_skill.id }}">
                <button type="submit" class="upgrade-btn" {% if character.gold < char_skill.current_level|multiply:50 %}disabled{% endif %}>
                    升级技能
                </button>
            </form>
            {% else %}
            <span class="max-level">已达到最高等级</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<style>
    .upgrade-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .character-stats, .skills-section {
        background: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .stats-info {
        margin-bottom: 20px;
    }

    .upgrade-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .upgrade-form {
        display: inline-block;
    }

    .upgrade-btn {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background: #4CAF50;
        color: white;
        cursor: pointer;
        transition: background 0.3s;
    }

    .upgrade-btn:disabled {
        background: #cccccc;
        cursor: not-allowed;
    }

    .upgrade-btn:hover:not(:disabled) {
        background: #45a049;
    }

    .skill-item {
        background: white;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .skill-info {
        flex: 1;
    }

    .skill-info h3 {
        margin: 0 0 10px 0;
    }

    .max-level {
        color: #666;
        font-style: italic;
    }

    .skills-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .shop-btn {
        padding: 8px 16px;
        background: #2196F3;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background 0.3s;
    }

    .shop-btn:hover {
        background: #1976D2;
    }
</style>
{% endblock %} 